<template>
  <div class="div_btn" @click="setToggleSide">
    |||
  </div>
  <!-- <el-button @click="setToggleSide" color="#ccc" bg> -->
    <!-- <el-icon><Fold /></el-icon> -->
    <!-- <el-icon><Expand /></el-icon> -->
  <!-- </el-button> -->
  <el-menu
        active-text-color="#ffd04b"
        background-color="#333744"
        class="el-menu-vertical-demo"
        text-color="#fff"
        unique-opened
        :default-active="defaultActive"
        :collapse='$store.state.ToggleSide'
        :collapse-transition="false"
        style="border:none"
        router
      >

      <!-- 一级导航 -->
        <el-sub-menu
          v-for="(item, index) in menusList"
          :key="item.id"
          :index="item.id+''"
        >
          <template #title>
            <el-icon>
              <!-- 遍历字体图标 -->
              <component :is="componentId[index]"></component>
              <!-- <location /> -->
            </el-icon>
            <span>{{item.authName}}</span>
          </template> 

          <!-- 二级导航 -->
          <el-menu-item
            v-for="it in item.children"
            :key="it.id"
            :index="it.path"
            @click="savePath(it.path)"
          >
            <el-icon><Menu /></el-icon>
            {{it.authName}}
          </el-menu-item>

        </el-sub-menu>
        
      </el-menu>
</template>

<script setup>
import { ref } from 'vue'
import { getMenus } from '@/api/menus'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

const route = useRoute()
const store = useStore()
const menusList = ref([])
const getData = async () => {
  const res = await getMenus()
  menusList.value = res.data.data
}
getData()

// 字体图片样式
const componentId = ref(['UserFilled', 'setting', 'shop', 'tickets', 'pie-chart'])

// 侧边栏展开与影藏
const setToggleSide = () => {
  store.commit('setToggleSide')
}

// 刷新之后依旧存之前选中的路径
const defaultActive = ref(localStorage.getItem('path') || '/users')
const savePath = (path) => {
  // 保存路径
  localStorage.setItem('path', `${path}`)
}

</script>

<style scoped lang="less">
.div_btn{
  text-align: center;
  font-size: 12px;
  // 字母间隔
  letter-spacing: 2px;
  line-height: 25px;
  background-color: #ccc;
  cursor: pointer;
}
.el-button{
  width: 100%;
  background-color: #ccc;
}
</style>
